<template>
	<view class="container">
		<custom-header title="提取文字" show-bg-color show-back />
		<view class="layout">
			<view class="upload-layout">
				<view class="title">视频链接</view>
				<uni-easyinput placeholder="此处添加视频链接" clearSize="22">
				</uni-easyinput>
				<view class="file-box video">
					<view class="cover"></view>
				</view>
				<view class="btn-group">
					<view class="btn active">开始解析</view>	
				</view>
			</view>
			<view class="extract-layout">
				<view class="title">文字提取</view>
				<view class="content"></view>
				<view class="btn">复制</view>
				<!-- <view class="btn active">复制</view> -->
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue';
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #F3F8FF;
		.layout {
			width: 100%;
			padding: 24rpx 48rpx;
			display: flex;
			flex-direction: column;
			gap: 24rpx;
			.upload-layout {
				min-height: 414rpx;
				background-color: white;
				border-radius: 12rpx;
				padding: 36rpx 24rpx;
				.title {
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 32rpx;
				}
				.file-box {
					margin-top: 32rpx;
					height: 178rpx;
					background-color: #F8F9FD;
					border-radius: 8rpx;
					border: 1rpx solid #E4E7EC;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					gap: 24rpx;
					.title {color: #999;font-size: 18rpx;line-height: 18rpx;font-weight: 400;}
					.btn {
						width: 238rpx;
						height: 64rpx;
						background-color: white;
						border-radius: 8rpx;
						border: 1rpx solid #E4E7EC;
						display: flex;
						align-items: center;
						justify-content: center;
						gap: 15rpx;
						color: #333;
						font-size: 24rpx;
						line-height: 24rpx;
						font-weight: 400;
						.icon {width: 22rpx; height: 22rpx;}
					}
				}
				.video {
					height: 280rpx;
					background-color: #333;
					.cover {
						width: 140rpx;
						height: 100%;
						border: 1rpx solid red;
					}
				}
				.btn-group {
					margin-top: 24rpx;
					display: flex;
					gap: 24rpx;
					align-items: center;
					justify-content: center;
					.btn {
						width: 217rpx;
						height: 72rpx;
						color: white;
						font-size: 28rpx;
						font-weight: 400;
						background-color: #AAB2C3;
						border-radius: 8rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.active {
						background: #0051FE;
					}
					.reset {
						background: #F3F8FF;
						color: #0051FE;
					}
				}
				
			}
			.extract-layout {
				min-height: 644rpx;
				background-color: white;
				border-radius: 12rpx;
				padding: 36rpx 24rpx;
				.title {
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
				}
				.content {
					width: 100%;
					margin-top: 32rpx;
					min-height: 400rpx;
					background-color: #F8F9FD;
					border-radius: 8rpx;
					border: 1rpx solid #E4E7EC;
					padding: 36rpx 28rpx;
					font-size: 28rpx;
					color: #333;
					font-weight: 400;
				}
				.btn {
					margin: 0 auto;
					margin-top: 24rpx;
					width: 100%;
					height: 80rpx;
					color: white;
					font-size: 28rpx;
					font-weight: 400;
					background-color: #AAB2C3;
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.active {
					background: #0051FE;
				}
			}
		}
		
	}
	
</style>
